<!--
 * @Date: 2022-04-16 13:14:37
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-07-15 09:26:04
 * @FilePath: \imitation-microblog-vue\src\components\Topic\index.vue
 * @Description: 创建回复
-->
<template>
  <div class="topicContainer">
    <div class="textArea">
      <!-- <div class="test"></div> -->
      <el-input
        v-model="textarea"
        class="elInput"
        :rows="2"
        maxlength="200"
        type="textarea"
        placeholder="写下你的评论吧~"
      />
      <div style="margin-top: 5px; font-size: 12px">
        {{ textarea.length }}/300
      </div>
    </div>
    <div class="bottom">
      <div class="tools">
        <emoji @getEmoji="getEmoji">
          <div class="icon">
            <i class="iconfont icon-emoji"></i>
          </div>
        </emoji>
      </div>
      <el-button
        type="warning"
        plain
        :disabled="disabled"
        round
        @click="submitTopic"
        >发送</el-button
      >
    </div>

    <div v-for="(item, index) in topicData.topicList" :key="index">
      <show-comment :commentData="item" :getComment="getComment"></show-comment>
    </div>
    <div class="paginationBox">
      <el-pagination
        v-model:currentPage="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next"
        @current-change="currentChange"
        :total="topicData.count"
        hide-on-single-page
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import emoji from "../emoji/index.vue";
import chooseImg from "../chooseIMG/index.vue";
import { topicDataType } from "./types";
import {
  computed,
  getCurrentInstance,
  onMounted,
  provide,
  reactive,
  ref,
} from "vue";
import showComment from "../showComment.vue";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
const store = useStore();
const textarea = ref<string>("");
let currentPage = ref<number>(1);
let pageSize = ref<number>(5);
const emits = defineEmits(["getCommentCount"]);
let disabled = computed(() => {
  return textarea.value.trim() == "" ? true : false;
});

//获取选择的表情
const getEmoji = (emoji: { emoji: string }) => {
  textarea.value += emoji;
};
let topicData = reactive<topicDataType>({
  count: 0,
  topicList: [],
});

const props = defineProps({
  blogId: {
    type: Number,
    required: true,
  },
});
const { $api } = getCurrentInstance()!.appContext.config.globalProperties!;
//获取评论列表
const getCommentList = async (
  currentPage: number,
  pageSize: number,
  id: number,
) => {
  let res = await $api.topic.reqTopicList(currentPage, pageSize, id);
  if (res.code == 200) {
    topicData.count = res.data.count;
    emits("getCommentCount", topicData.count);
    topicData.topicList = res.data.topicList;
  }
};
//分页
const currentChange = (cur: number) => {
  // console.log(cur);
  currentPage.value = cur;
  getCommentList(currentPage.value, pageSize.value, props.blogId);
};
const getComment = () => {
  getCommentList(currentPage.value, pageSize.value, props.blogId);
};
provide("getComment", getComment);
//创建评论
const submitTopic = async () => {
  let res = await $api.topic.reqCreateTopic(props.blogId, {
    content: textarea.value,
  });
  // console.log(res);
  if (res.code == 200) {
    ElMessage.success("发布成功");
    textarea.value = "";
    getCommentList(currentPage.value, pageSize.value, props.blogId);
  } else {
    ElMessage.error(res.message);
  }
};
onMounted(() => {
  getCommentList(currentPage.value, pageSize.value, props.blogId);
});
</script>
<style lang="less" scoped>
.topicContainer {
  width: 100%;
  background-color: #fff;
  margin-bottom: 20px;
  // padding: 10px 20px;
  border-radius: 10px;
  .textArea {
    padding: 10px 20px;
  }
  .tools {
    // margin-top: 5px;
    padding: 0px 20px;
    display: flex;
  }
  .icon {
    width: 30px;
    height: 30px;
    border-radius: 50px;
    cursor: pointer;

    // background-color: aqua;

    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
      background-color: #fff2e5;

      i {
        color: #ff8200;
      }
    }

    .iconfont {
      font-size: 20px;
    }
  }
  .showCommentArea {
    margin-top: 5px;
    padding: 0 20px 10px 20px;
    border-top: 1px solid #f2f2f2;
    display: flex;
    align-items: center;
    .left {
      width: 40px;
      height: 40px;
      // margin-top: 5px;

      img {
        width: 100%;
        height: 100%;

        object-fit: cover;
      }
    }
    .center {
      flex: 1;
      width: 100%;
      padding: 10px 10px 0 10px;
      display: flex;
      flex-direction: column;

      .nickName {
        font-weight: 700;
      }
      .createTime {
        font-size: 12px;
        color: #939393;
        margin: 5px 0;
      }
    }
    .right {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .content {
    flex: 1;
    padding: 0 20px 20px 20px;
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
  }
  .paginationBox {
    display: flex;
    justify-content: center;
    // text-align: center;
    padding: 10px 0;
  }
}
</style>
